import React from 'react';
import axios from 'axios';
import Tloader from 'react-touch-loader';
import { Item, Icon, Button, Modal, TextArea } from 'semantic-ui-react';
import './LoadMore.css'

class FaqWindow extends React.Component{
    constructor(props){
        super(props);
        this.state ={
            info:'',
        }
    }
    handleInfo = (e) =>{
        this.setState({
            info:e.target.value
        })
    }
    submitHandle = () =>{
        axios.post('info/question',{
            question:this.state.info
        }).then(res=>{
            if(res.meta.status === 200){
                this.props.close()
            }else {
                alert('服务器发生错误')
            }
        })
    }
    render(){
        return(
            <div>
                <Modal size="small" onClose={this.props.close} open={this.props.open}>
                    <Modal.Header>发表评论</Modal.Header>
                    <Modal.Content>
                        <TextArea value={this.state.info} onChange={this.handleInfo} style={{width:'100%'}} placeholder="Tell us more"></TextArea>
                    </Modal.Content>
                    <Modal.Actions>
                        <Button negative onClick={this.props.close}>取消</Button>
                        <Button positive onClick={this.submitHandle} icon="checkmark" labelPosition="right" content="发表"></Button>
                    </Modal.Actions>
                </Modal>
            </div>
        );
    }
}

// 公共样式和获取数据方法组件
class CommonList extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            isOpen:false
        }
    }
    showWindow = () =>{
        this.setState({
            isOpen:true
        })
    }
    hideWindow = () =>{
        this.setState({
            isOpen:false
        })
    }
    render(){
        let { type, list } = this.props;
        // 资讯列表和头条列表模板类似 type == 1 || type == 2
        let listTpl = null;
        if(type === 1 || type === 2){
            // 资讯列表或者头条列表模板
            let listInfo = list.map(item=>{
                return(
                    <Item key={item.id}>
                        <Item.Image size="small" src="http://47.96.21.88:8086/public/1.png"></Item.Image>
                        <Item.Content verticalAlign="middle">
                            <Item.Header className='info-title'>{item.info_title}</Item.Header>
                            <Item.Meta>
                                <span className='price'>$1200</span>
                                <span className='stay'>1 Month</span>
                            </Item.Meta>
                        </Item.Content>
                    </Item>
                );
            })
            listTpl = (
                <Item.Group unstackable>
                    {listInfo}
                </Item.Group>
            )
        }else if(type === 3){
            // 问答列表
            let faqInfo = list.map(item=>{
                return (
                    <li key={item.id}>
                        <div className="title">
                            <span className="cate">
                                <Icon color="green" name="users" size="small"></Icon>
                                思维
                            </span>
                            <span>
                                {item.question_name}
                            </span>
                        </div>
                        {item.answer_content&&(
                            <div className="user">
                                <Icon circular name="users" size="mini"/>
                                {item.username}的回答
                            </div>
                        )}
                        <div className="tag">
                            {item.question_tag&&item.question_tag.split(',').map((tag,index)=>{return <span key={index}>{tag}X</span>})}
                            <span>{item.qnum?item.qnum:0}个回答</span>
                        </div>
                    </li>
                )
            })
            listTpl = (
                <div>
                    <FaqWindow close={this.hideWindow} open={this.state.isOpen}></FaqWindow>
                    <div className="info-ask-btn">
                        <Button onClick={this.showWindow} fluid color="green">快速提问</Button>
                    </div>
                    <div className="info-ask-list">
                        {faqInfo}
                    </div>
                </div>
            )
        }
        return listTpl;
    }
}
class LoadMore extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            list:[],
            total:0,
            pagenum:0,
            pagesize:2,
            hasMore:true,
            // 进度条状态
            initializing:1
        }
    }
    loadData = ()=>{
        let{type} = this.props;
        axios.post('infos/list',{
            type:type,
            pagenum:this.state.pagenum,
            pagesize:this.state.pagesize
        }).then(res=>{
            // console.log(res)
            if(this.state.pagenum === 0){
                this.setState({
                    list:res.data.list.data,
                    total:res.data.list.total,
                    // 进度条结束
                    initializing:2
                })
            }else {
                this.setState({
                    list:[...this.state.list,...res.data.list.data],
                    total:res.data.list.total,
                    // 进度条结束
                    initializing:2
                })
            }
            
        })
    }
    componentDidMount(){
        this.loadData()
    }
    refresh = (resolve,reject)=>{
        this.setState({
            pagenum:0,
            // 进度条开始
            initializing:1
        },()=>{
            this.loadData()
        })
       resolve();
    }
    LoadMore = (resolve,reject)=>{
        let { pagenum, pagesize, total } =this.state;
        // if(pagenum>=total && total !==0 ){
        //     this.setState({
        //         hasMore:false
        //     })
        //     return;
        // }
        this.setState({
            // 加载下一页数据
            pagenum:pagenum + pagesize,
        },()=>{
            // 重新加载列表数据
            this.loadData()
            this.setState({
                hasMore:this.state.pagenum+pagesize-total<0?true:false
            })
        })
        resolve();
    }
    render(){
        let {hasMore, list, initializing } =this.state;
        let { type } =this.props
        return(
            <div className="view">
                <Tloader 
                    className="main"
                    onRefresh={this.refresh}
                    onLoadMore={this.LoadMore}
                    hasMore={hasMore}
                    initializing={initializing}
                >
                <ul>
                    {/* 显示列表信息 */}
                    <CommonList type={type} list={list}/>
                </ul>
                </Tloader>
            </div>
        );
    }
}


export default LoadMore;